<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='../../dist/fullcalendar.css' rel='stylesheet' />
<link href='../../dist/fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='../../node_modules/moment/moment.js'></script>
<script src='../../node_modules/jquery/dist/jquery.js'></script>
<script src='../../dist/fullcalendar.js'></script>
<script>

  $(document).ready(function() {

    $('#calendar').fullCalendar({
      headerToolbar: {
        left: 'prev,next today',
        center: 'title',
        right: 'listMonth,month,week'
      },
      initialView: 'listMonth',
      initialDate: '2014-06-12',
      editable: true,
      eventSources: [
        {
          color: 'green',
          events: [
            {
              title: 'Click for Google',
              url: 'http://google.com/',
              start: '2014-06-01'
            },
            {
              id: 'goog-window-1',
              title: 'Click for Google, new window 1',
              url: 'http://google.com/',
              start: '2014-06-01'
            },
            {
              id: 'goog-window-2',
              title: 'Click for Google, new window 2',
              url: 'http://google.com/',
              start: '2014-06-01'
            }
          ]
        },
        {
          events: [
            {
              title: 'Event With Color',
              color: 'red',
              start: '2014-06-02'
            },
            {
              title: 'All Day Event',
              start: '2014-06-02'
            },
            {
              title: 'Long Event',
              start: '2014-06-07',
              end: '2014-06-10'
            },
            {
              groupId: 999,
              title: 'Repeating Event',
              start: '2014-06-09T16:00:00'
            },
            {
              groupId: 999,
              title: 'Repeating Event',
              start: '2014-06-16T16:00:00'
            },
            {
              title: 'Meeting',
              start: '2014-06-12T10:30:00',
              end: '2014-06-12T12:30:00'
            },
            {
              title: 'Lunch',
              start: '2014-06-12T12:00:00'
            },
            {
              title: 'Birthday Party',
              start: '2014-06-13T07:00:00'
            }
          ]
        }
      ],
      eventClick: function(event, jsEvent) {
        console.log('eventClick', event.title);

        if (event.id === 'goog-window-1') {
          window.open(event.url);
          return false;
        }
        else if (event.id === 'goog-window-2') {
          jsEvent.preventDefault();
          window.open(event.url);
        }
      },
      eventMouseEnter: function(arg) {
        console.log('eventMouseEnter', arg.event.title);
      },
      eventMouseLeave: function(arg) {
        console.log('eventMouseLeave', arg.event.title);
      }
    });

  });

</script>
<style>

  body {
    margin: 0;
    padding: 0;
    font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
    font-size: 14px;
  }

  #calendar {
    width: 900px;
    margin: 40px auto;
  }

</style>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
